<template>
  <el-form ref="formRef" :model="form" :rules="rules" :show-message="false" label-width="100px" size="default" label-suffix="：">
    <el-row>
      <el-col :span="24">
        <el-form-item label="上传头像">
          <x-uploader :accept="['.jpg', '.png', '.jpeg']" v-model="form.avatar"></x-uploader>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="账号" prop="userName">
          <el-input v-model="form.username" placeholder="请输入账号"></el-input>
        </el-form-item>
      </el-col>
      <el-col v-if="$empty(form.id)" :span="12">
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入用户密码" show-password></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="姓名" prop="nickName">
          <el-input v-model="form.name" placeholder="请输入用户昵称"></el-input>
        </el-form-item>
      </el-col>
<!--      <el-col :span="12">-->
<!--        <el-form-item label="用户性别" prop="sex">-->
<!--          <x-select v-model="form.gender" options="gender" placeholder="请选择用户性别"></x-select>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
      <el-col :span="12">
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="角色" prop="roleList">
          <x-select v-model="form.role" options="ROLE_LIST" type="remote" :multiple="true" placeholder="请选择角色"></x-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
<!--      <el-col :span="24">-->
<!--        <el-form-item label="备注">-->
<!--          <el-input v-model="form.remark" :rows="3" type="textarea" placeholder="请输入备注" />-->
<!--        </el-form-item>-->
<!--      </el-col>-->

    </el-row>
  </el-form>
</template>

<script setup name="x-form">
import md5 from 'js-md5'
import useStore from '@/stores/modules/sys/user';
const users = useStore();
import {reactive, ref} from "vue";

const formRef = ref()
const form = reactive({
  id: "",
  nickName: "",
  sex: "",
  phone: "",
  email: "",
  userName: "",
  password: "",
  role: [],
  status: 1,
  remark: "",
  avatar: ""
})


const rules = ref({
  name: { required: true, message: '用户昵称不能为空', trigger: 'click'},
  // sex: { required: true, message: '用户性别不能为空', trigger: 'click'},
  phone: [
    { required: true, message: '手机号码不能为空', trigger: 'click'},
    // { required: true, message: '手机号码格式不正确', trigger: 'click', pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/},
  ],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'click'},
    { required: true, message: '邮箱格式不正确', trigger: 'click', pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/},
  ],
  username: { required: true, message: '账号不能为空', trigger: 'click'},
  password: { required: true, message: '用户密码不能为空', trigger: 'click'},
  role: { required: true, message: '角色不能为空', trigger: 'click'},
  status: { required: true, message: '状态不能为空', trigger: 'click'},
})

/**
 * 表单验证
 * @param callback
 * @returns {Promise<void>}
 */
const doValidate = async (callback) => {
  await formRef.value.validate((valid, fields) => {
    if (! valid) {
      let errMsg = Helper.getFirstMessage(fields);
      if (errMsg) {
        Msg.error(errMsg)
      }
      callback(false)
      return
    }

    if(!Helper.empty(form.id)) {
       delete form.password;
    } else {
      // form.password = md5(form.password);
    }

    callback(form)
  })
}

/**
 * 保存
 * @returns {Promise<void>}
 */
const submit = async () => {
  await doValidate(async (form) => {
    if (form == false) {
      return
    }

    let result = null
    result = form.id ? await users.modify(form) : await users.add(form)
    if (result) {
      Dialog.close()
    }
  })
}

/**
 * 获取数据
 * @param data
 */
const render = (data) => {
  if (! Helper.empty(data)) {
    for (let key in data) {
      form[key] = data[key]
    }
  }
}

defineExpose({ render, submit })
</script>
